<template>
  <view>
    <view class="tabbar-title" v-if="elevatorType == 1">
      <v-tabs class="tabs" v-model="activeTab" :scroll="false" :tabs="tabs" @change="changeTab"></v-tabs>
    </view>
    <!-- 机房 -->
    <view class="root" v-if="elevatorType == 1">
      <uni-card>
        <!-- 机房、滑轮间环境 -->
        <view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
          <view class="machine">
            <view class="">
              <image src="../../../static/image/straightLadder/show2.png" mode=""></image>
              <text class="machine-name">
                {{ item.projectName }}
              </text>
            </view>
            <!-- 开关 -->
            <switch :key="item.recordId" :checked="item.upkeepResult == 1"
                    @change="event=>switch1Change(event,item.recordId)"/>
          </view>
          <view class="remind">
            {{ item.projectRequire }}
          </view>
        </view>
      </uni-card>
      <block v-if="indexs == 0">
        <uni-card>
          <view class="comment">
            <wu-textarea v-model="roomRemark" placeholder="备注:" maxlength="100"></wu-textarea>
          </view>
        </uni-card>
        <!-- 图片 -->
        <view class="upimage">
          <tm-image :width="300" :height="200" class="img"
                    :src="roomImg || '../../../static/image/detailsMsg/images.png'" mode=""
                    @click="roomImgs"></tm-image>
        </view>
      </block>
      <!-- 层站 -->
      <block v-else-if="indexs == 1">
        <uni-card>
          <view class="comment">
            <wu-textarea v-model="floorRemark" placeholder="备注:" maxlength="100"></wu-textarea>
          </view>
        </uni-card>
        <!-- 图片 -->
        <view class="upimage">
          <tm-image :width="300" :height="200" class="img"
                    :src="floorImg || '../../../static/image/detailsMsg/images.png'" mode=""
                    @click="floorImgs"></tm-image>
        </view>
      </block>
      <!-- 桥箱 -->
      <block v-else-if="indexs == 2">
        <uni-card>
          <view class="comment">
            <wu-textarea v-model="capsulesRemark" placeholder="备注:" maxlength="100"></wu-textarea>
          </view>
        </uni-card>
        <!-- 图片 -->
        <view class="upimage">
          <tm-image :width="300" :height="200" class="img"
                    :src="capsulesImg || '../../../static/image/detailsMsg/images.png'" mode=""
                    @click="capsulesImgs"></tm-image>
        </view>
      </block>
      <block v-else-if="indexs == 3">
        <uni-card>
          <view class="comment">
            <wu-textarea v-model="shaftRemark" placeholder="备注:" maxlength="100"></wu-textarea>
          </view>
        </uni-card>
        <!-- 图片 -->
        <view class="upimage">
          <tm-image :width="300" :height="200" class="img"
                    :src="shaftImg || '../../../static/image/detailsMsg/images.png'" mode=""
                    @click="shaftImgs"></tm-image>
        </view>
      </block>
      <!-- 签名 -->
      <uni-card>
        <view class="" @touchmove.prevent.stop="">
          <view class="tipText textleft">签字</view>
          <canvas class="canvasHimc mycanvasAdmin" canvas-id="mycanvasAdmin"
                  @touchstart="touchstart($event,'mycanvasAdmin')"
                  @touchmove="touchmove" @touchend="touchend"></canvas>
          <view class="flexBottom">

            <view class="" @click="clear('mycanvasAdmin')">清除</view>
            <view class="" @click="rescueComplet">保存</view>
          </view>
        </view>
      </uni-card>
      <button type="default" @click="submitMaintain">提交</button>
    </view>
    <view class="root" style="margin-top: 20px;" v-if="elevatorType == 2">
      <uni-card>
        <!-- 机房、滑轮间环境 -->
        <view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
          <view class="machine">
            <view class="">
              <image src="../../../static/image/straightLadder/show2.png" mode=""></image>
              <text class="machine-name">
                {{ item.projectName }}
              </text>
            </view>
            <!-- 开关 -->
            <switch :key="item.recordId" :checked="item.upkeepResult == 1" @change="switch1Change(item.recordId)"/>
          </view>
          <view class="remind">
            {{ item.projectRequire }}
          </view>
        </view>
      </uni-card>
      <uni-card>
        <view class="comment">
          <wu-textarea v-model="roomRemark" placeholder="备注:" maxlength="100"></wu-textarea>
        </view>
      </uni-card>
      <!-- 图片 -->
      <view class="upimage">
        <tm-image :width="300" :height="200" class="img" :src="roomImg || '../../../static/image/detailsMsg/images.png'"
                  mode=""
                  @click="roomImgs"></tm-image>
      </view>
      <!-- 签名 -->
      <uni-card>
        <view class="" @touchmove.prevent.stop="">
          <view class="tipText textleft">签字</view>
          <canvas class="canvasHimc mycanvasAdmin" canvas-id="mycanvasAdmin"
                  @touchstart="touchstart($event,'mycanvasAdmin')"
                  @touchmove="touchmove" @touchend="touchend"></canvas>
          <view class="flexBottom">
            <view class="" @click="clear('mycanvasAdmin')">清除</view>
            <view class="" @click="rescueComplet">保存</view>
          </view>
        </view>
      </uni-card>
      <button type="default" @click="submitMaintains">提交</button>
    </view>
  </view>
</template>

<script>
import {getUpkeepDetail, submitUpkeepAuditInfo} from "@/api/iot/upkeepInfo";
import {updateUpkeepProjectRecord} from "@/api/iot/upkeepProjectRecord";
import {ossUpload} from "@/api/system/oss";
import UniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
import WuTextarea from "@/uni_modules/wu-textarea/components/wu-textarea/wu-textarea.vue";

export default {
  components: {WuTextarea, UniCard},
  data() {
    return {
      elevatorType: "", //直梯带tab切换
      upkeepId: "", //保养清单页面详情id
      imageList: [],
      category: 'image',
      activeTab: 0,
      tabs: ['机房', '层站', '轿厢', '井道'],
      machineList: [], //渲染列表
      updateUpkeep: "", //开关状态
      roomRemark: "", //机房备注
      floorRemark: '', //层站备注
      capsulesRemark: '', //桥箱备注
      shaftRemark: '', //井道备注
      ctx: '', //绘图图像
      points: [], //路径点集合
      roomImg: '', //机房图片
      floorImg: '', //层站图片
      capsulesImg: '', //桥箱图片
      shaftImg: '', //井道上传图片
      Sureflag: false, //
      indexs: 0,
      signatures: '', //签名
      save: true,
      upkeepInfo: '',
    }
  },
  onLoad(e) {
    this.upkeepId = e.upkeepId;
    this.getMachineList(0);
  },
  methods: {

    // 导航切换
    changeTab(index) {
      this.indexs = index
      this.getMachineList(index);
      console.log('当前选中的项：' + index)
    },
    // 开关事件
    switch1Change: function (e, recordId) {
      let upkeepResult = e.detail.value ? 1 : 2;
      this.updateUpkeepDate(recordId, upkeepResult);
    },
    async updateUpkeepDate(recordId, upkeepResult) {
      let param = {
        recordId: recordId,
        upkeepResult: upkeepResult,
      }
      await updateUpkeepProjectRecord(param);
    },
    //机房上传图片
    async roomImgs(e) {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          const ress = await ossUpload(tempFilePaths[0]);
          console.log('ress', ress)
          this.roomImg = ress.url
        }
      });
    },
    //层站上传图片
    async floorImgs(e) {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          const ress = await ossUpload(tempFilePaths[0]);
          console.log('ress', ress)
          this.floorImg = ress.url
        }
      });
    },
    //桥箱上传图片
    async capsulesImgs(e) {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          const ress = await ossUpload(tempFilePaths[0]);
          console.log('ress', ress)
          this.capsulesImg = ress.url
        }
      });
    },
    //井道上传图片
    async shaftImgs(e) {
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const tempFilePaths = res.tempFilePaths;
          const ress = await ossUpload(tempFilePaths[0]);
          console.log('ress', ress)
          this.shaftImg = ress.url
        }
      });
    },

    //查询保养清单页面详情接口
    async getMachineList(idn) {
      const data = await getUpkeepDetail(this.upkeepId, idn + 1);
      console.log(data);
      this.upkeepInfo = data
      this.elevatorType = data.elevator.elevatorType
      this.machineList = data.upkeepProjectRecordVoList
      console.log(this.machineList)
      uni.setNavigationBarTitle({
        title: this.upkeepInfo.elevatorName
      })
    },
    async submitMaintain() {
      // if (this.roomRemark == '') {
      // 	uni.showToast({
      // 		title: '请输入机房备注',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.roomImg == '') {
      // 	uni.showToast({
      // 		title: '请上传机房图片',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.floorRemark == '') {
      // 	uni.showToast({
      // 		title: '请输入层站备注',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.floorImg == '') {
      // 	uni.showToast({
      // 		title: '请上传层站图片',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.capsulesRemark == '') {
      // 	uni.showToast({
      // 		title: '请输入桥箱备注',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.capsulesImg == '') {
      // 	uni.showToast({
      // 		title: '请上传桥箱图片',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.shaftRemark == '') {
      // 	uni.showToast({
      // 		title: '请输入井道备注',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      // if (this.shaftImg == '') {
      // 	uni.showToast({
      // 		title: '请上传井道图片',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      if (this.signatures == '') {
        uni.showToast({
          title: '请保存签名',
          icon: 'none'
        })
        return
      }
      let parme = {
        type: 1,
        upkeepId: this.upkeepId,
        roomRemark: this.roomRemark,
        roomImg: this.roomImg,
        floorRemark: this.floorRemark,
        floorImg: this.floorImg,
        capsulesRemark: this.capsulesRemark,
        capsulesImg: this.capsulesImg,
        shaftRemark: this.shaftRemark,
        shaftImg: this.shaftImg,
        referUserSign: this.signatures,
      }
      const res = await submitUpkeepAuditInfo(parme)
      let pages = getCurrentPages();
      let prvePage = pages[pages.length - 2]
      prvePage.$vm.changeTab(0)
      uni.navigateBack({})
    },
    //扶梯提交
    async submitMaintains() {
      if (this.roomRemark == '') {
        uni.showToast({
          title: '请输入机房备注',
          icon: 'none'
        })
        return
      }
      if (this.roomImg == '') {
        uni.showToast({
          title: '请上传机房图片',
          icon: 'none'
        })
        return
      }

      if (this.signatures == '') {
        uni.showToast({
          title: '请保存签名',
          icon: 'none'
        })
        return
      }
      let parme = {
        type: 1,
        upkeepId: this.upkeepId,
        roomRemark: this.roomRemark,
        roomImg: this.roomImg,
        referUserSign: this.signatures,
      }
      const res = await submitUpkeepAuditInfo(parme)
      let pages = getCurrentPages();
      let prvePage = pages[pages.length - 2]
      prvePage.$vm.changeTab(0)
      uni.navigateBack({})
    },
    rescueComplet() {
      let t = this;
      if (!this.Sureflag) {
        this.tip("请签字")
        return
      }
      uni.canvasToTempFilePath({
        // fileType:""
        canvasId: 'mycanvasAdmin',
        success: async function (res) {
          let filest = await ossUpload(res.tempFilePath);
          t.save = false
          t.signatures = filest.url;
          uni.showToast({
            title: '保存成功',
            icon: 'none'
          })

        }
      })
    },

    clear(id) {
      let that = this;
      uni.getSystemInfo({
        success: function (res) { // res - 各种参数
          let info = uni.createSelectorQuery().select(`.${id}`);
          info.boundingClientRect(function (data) {
            console.log(data)
            that.Sureflag = false;
            that.signatures = ''
            that.ctx.clearRect(0, 0, data.width, data.height)
            that.ctx.draw(true)
          }).exec()
        }
      });
    },

    //触摸开始，获取到起点
    touchstart: function (e, id) {
      console.log("000");
      this.ctx = uni.createCanvasContext(id, this); //创建绘图对象

      //设置画笔样式
      this.ctx.lineWidth = 4;
      this.ctx.lineCap = "round"
      this.ctx.lineJoin = "round"

      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = {
        X: startX,
        Y: startY
      };
      this.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },

    //触摸移动，获取到路径点
    touchmove: function (e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = {
        X: moveX,
        Y: moveY
      };
      this.points.push(movePoint); //存点
      let len = this.points.length;
      if (len >= 2) {
        this.draw(); //绘制路径
      }
      ;
      this.Sureflag = true
    },
    // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
    touchend: function () {
      this.points = [];
    },
    /* ***********************************************
    #   绘制笔迹
    #	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
    #	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
    #	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
    ************************************************ */
    draw: function () {
      let point1 = this.points[0]
      let point2 = this.points[1]
      this.points.shift()
      this.ctx.moveTo(point1.X, point1.Y)
      this.ctx.lineTo(point2.X, point2.Y)
      this.ctx.stroke()
      this.ctx.draw(true)
    },
  }
}
</script>

<style scoped>
.tabs {
  height: 200rpx;
}

.v-tabs {
}

.v-tabs__container {
  height: 200rpx !important;
  line-height: 100rpx !important;
}

.uni-card {
  width: 670rpx;
  /* height: 820rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  border: none;
  margin-bottom: 30rpx;
}

.v-tabs {
  height: 110rpx;
  background-color: #F0F3F6;
}

/* 机房 */
.machine-div {
  /* height: 150rpx; */
  border-bottom: 1px solid #E2E6EF;
  line-height: 30rpx;

}

.machine {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.machine image {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
  margin-right: 19rpx;
}

.machine-name {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #34363D;
}

switch {
  transform: scale(0.8, 0.7)
}

.remind {
  /* height: 60rpx; */
  margin-left: 55rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 备注 */
.comment {
  width: 100%;
  /* height: 226rpx; */
  background: #FFFFFF;
  border-radius: 16rpx;
  border: none;
}

.wu-textarea {
  border: none !important;
}

/* 上传图片 */
.upimage {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  width: 670rpx;
  margin: 0 auto;
  margin-bottom: 50rpx;
}

.img {
  padding: 20rpx 0;
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  position: relative;
  margin-bottom: 20rpx;
}

.imgIcon {
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;
  position: absolute;

  left: 210rpx;
}

easy-upload {
  width: 200rpx;
  height: 200rpx;
}

/* 提交 */
button {
  width: 670rpx;
  height: 104rpx;
  background: #017EFE;
  box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(1, 126, 254, 0.2);
  border-radius: 52rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  line-height: 104rpx;
  margin-top: 100rpx;
  margin-bottom: 69rpx;
}

/* 签名画布 */
/* 画布 */
/* .signature{
  margin-top: 20rpx;
} */
.mycanvas {
  /* width: 100%; */
  width: 300rpx;
  height: 151rpx;
  /* height: calc(100vh - 1200upx); */
  background-color: #ECECEC;
}

.x-m-con {
  width: 255rpx;
  /* height: 151rpx; */
  margin: 0 auto;
}

.success {
  width: 150rpx;
  height: 56rpx;
  background: #017EFE;
  box-shadow: 0px 5px 10px 0px rgba(1, 126, 254, 0.2);
  border-radius: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 15rpx;
}

.success text {
  color: #FFFFFF;
}

.successRight {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.submitOrder {
  padding: 0 20rpx;
  word-spacing: 10rpx;

}

.submitOrder text {
  margin: 0 10rpx;
}

.f16 {
  margin-top: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #34363D;
}

.flexBottom {
  display: flex;
  align-items: center;

}

.flexBottom view {
  text-align: center;
  flex: 1;
}
</style>
